<template>
	<div>
		<button @click="current++">更新current</button>
		<p>{{ current }}</p>
		<Child ref="childRef"></Child>
	</div>
</template>

<script setup>
import Child from './Child.vue'
import { ref, watchEffect, watchPostEffect, watchSyncEffect } from 'vue'

const childRef = ref(null)
const current = ref(0)

// 组件渲染之前执行
const stop = watchEffect(() => {
	console.log('watchEffect',current.value)
})
// 停止监听
// stop()

// watchEffect() 使用 flush: 'post' 选项时的别名。组件渲染之后执行
watchPostEffect(() => {
	console.log('watchPostEffect',current.value)
})
// watchEffect() 使用 flush: 'sync' 选项时的别名。响应式依赖发生改变时立即执行
watchSyncEffect(() => {
	console.log('watchSyncEffect',current.value)
})

</script>
<style lang='less' scoped></style>
